<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东登录页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header">
        <img src="jd-logo.png" alt="京东 logo" class="logo">
        <span class="feedback">登录页面，改进建议</span>
    </div>

    <div class="login-container">
        <div class="login-box">
            <div class="left-section">
                <h2 class="text-center">京东APP扫码登录</h2>
                <p>打开京东APP点左上角扫一扫 📱 查看教程</p>
                <div class="qr-code">
                    <img src="qr-code.png" alt="QR Code">
                </div>
            </div>
            <div class="right-section">
                <div class="login-methods">
                    <button type="button" class="active">密码登录</button>
                    <button type="button">短信登录</button>
                </div>
                <form action="#" method="post">
                    <input type="text" placeholder="账号名/手机号/邮箱" class="input-field">
                    <input type="password" placeholder="密码" class="input-field">
                    <button type="submit" class="login-btn">登录</button>
                </form>
                <div class="additional-options">
                    <a href="#" class="social-login weixin"><img src="weixin-icon.png" alt="微信图标"> 微信登录</a>
                    <a href="#" class="social-login qq"><img src="qq-icon.png" alt="QQ图标"> QQ登录</a>
                    <a href="#" class="forgot-password">忘记密码</a>
                    <a href="#" class="register">立即注册</a>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="links">
            <a href="#">关于我们</a> |
            <a href="#">联系我们</a> |
            <a href="#">人才招聘</a> |
            <a href="#">商家入驻</a> |
            <a href="#">广告服务</a> |
            <a href="#">手机京东</a> |
            <a href="#">友情链接</a> |
            <a href="#">销售联盟</a> |
            <a href="#">京东社区</a> |
            <a href="#">京东公益</a>
        </div>
        <div class="copyright">
            Copyright © 2004-2025 京东JD.com 版权所有
        </div>
    </div>
</body>
</html>